<template>
	<div class="menu_container">
		<div class="home_logo_box">
			<img class="logo_img" src="../../assets/logo.png">
			<span >Alan Vue</span>
		</div>
		<ul class="menu_list_box">
			<template v-for="menuitem in menuConfigList"> 
				<li :class="['first_menu_li', menuitem.isCurentMenu]" @click="setCurentMenu(menuitem)" @mouseenter="showSecondMenu(menuitem, $event)" @mouseleave="hideSecondMenu(menuitem)">
					<i :class="['menu_icon iconfont', menuitem.iconClass]"></i>
					<a class="first_menu_a menu_item_a" :href="'#' + menuitem.url">{{menuitem.name}}</a>
				</li>
			</template>
		</ul>

		<div class="second_menu_container" v-show="isShowSecondMenu" @mouseleave="hideSecondMenu()" @mouseenter="showSecondMenu('', $event)" v-bind:style="secondMenuContainerClass">
			<ul>
				<template v-for="secondMenuItem in secondMenuList">
					<li class="second_menu_li">
						<i :class="['menu_icon iconfont', secondMenuItem.iconClass ]"></i>
						<a class="second_menu_a menu_item_a" :href="'#' + secondMenuItem.url">{{secondMenuItem.name}}</a>
					</li>
				</template>
			</ul>
		</div>
	</div>

</template>

<script type="text/javascript">
import menuConfigList from './menu-config.js';
export default {
	name: 'mainMenu',

	data () {
		return {
			menuConfigList: menuConfigList.menus,
			secondMenuList: [],
			isShowSecondMenu: false,
			secondMenuContainerClass: {
				left: '',
				top: '29px'
			}

		}
	},
	methods: {
		showSecondMenu: function(firstMenuItem, event){
			if('' === firstMenuItem){				
				this.isShowSecondMenu = true;
			}
			if(firstMenuItem && firstMenuItem.subMenus.length > 0){				
				this.isShowSecondMenu =true;
				this.secondMenuList = firstMenuItem.subMenus;
				this.secondMenuContainerClass.left = event.target.offsetLeft + 'px';
			}

		},
		hideSecondMenu: function(){
			this.isShowSecondMenu = false;
		},
		setCurentMenu: function(menuitem){
			this.resetMenuSelect(this.menuConfigList);
			menuitem.isCurentMenu = "curent_menu";
		},
		resetMenuSelect: function(menuList){
			var t = this;
			menuList.forEach(function(item, index){
				item.isCurentMenu = '';
				if(item.subMenus && item.subMenus.length > 0){
					t.resetMenuSelect(item.subMenus);
				};
			});
		}
	},
	created: function(){
		console.log(this.menuConfigList);
	},
}

</script>

<style lang="less" scoped>
@import "../style/common.less";

.menu_container{
	width: 100%;
	font-size: 14px;
	color: #666;
	height: 30px;
	border: 1px solid #d8d8d8;
	overflow: visible;
	position: relative;

	

	.home_logo_box{
		float: left;	
		height: 30px;	
		.logo_img{
			width: 24px;

		}
	}


	.menu_item_a{
		color: #666;
		text-decoration: none;
	}

	.menu_list_box{
		height: 30px;
		float: right;
		margin-right: 64px;

		

		.first_menu_li{
			display: inline-block;
			max-width: 160px;
			padding: 6px 5px;
			
			height: 18px;
			.first_menu_a{
				border-right: 1px solid #888;
				padding-right: 12px;
			}

			

		}
		.curent_menu{
			color: #008afe;
			a{
				color: #008afe;
			}
		}

	}
	.second_menu_container{
		position: absolute;
		max-width: 140px;
		border: 1px solid #efefef;
		padding: 5px 0;
		top: 0px;
		left: 0px;

		.second_menu_li{
			text-align: left;
			max-width: 140px;
			height: 24px;
			line-height: 24px;
			text-overflow: ellipsis;
			overflow: hidden;
			word-break: break-all;
			white-space: nowrap;
			margin: 0 12px;

			a:hover{
				color: #008afe;
			}

		}
	}
}
</style>